import { useState, useEffect } from 'react';
import { NavBar, Toast } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import { SearchBar } from 'antd-mobile';
import { Card } from 'antd-mobile';
import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:3000/';

export default function Tonggao() {
    const navigate = useNavigate();
    const [list, setlist] = useState([]);
    const [searchValue, setSearchValue] = useState('');

    useEffect(() => {
        axios.get('toutiao').then(res => {
            setlist(res.data.tou)
        })
    }, [])

    const back = () => {
        return () => {
            Toast.show({});
            navigate('/shou/index');
        };
    };

    const handleSearch = (value) => {
        setSearchValue(value);
        axios.get(`toutiao?search=${value}`).then(res => {
            setlist(res.data.tou);
        });
    }

    console.log(list);

    return (
        <div>
            <NavBar onBack={back()} title="标题">文旅头条</NavBar>
            <SearchBar placeholder='搜索你的头条' onSearch={handleSearch} />
            <Card>
                <div style={{ padding: '20px', display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}>
                    {list.map(item => <div key={item._id} onClick={() => { navigate(`/shou/tou/${item._id}`) }}>
                        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '30px' }}>
                            <img src={item.img} alt="" style={{ width: '100px' }} />
                            <div style={{ display: 'flex', flexDirection: 'column', marginLeft: '10px' }}>
                                <p>{item.title}</p>
                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                    <span> {item.timestamp}</span>
                                    <span> {item.readCount}次阅读</span>
                                </div>
                            </div>
                        </div>
                    </div>)}
                </div>
            </Card>
        </div>
    );
}